<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="会员名称" prop="memberName">
        <el-input v-model="queryParams.memberName" placeholder="请输入会员名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="店铺名称" prop="storeName">
        <el-input v-model="queryParams.storeName" placeholder="请输入店铺名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间" prop="createdAt">
        <el-date-picker clearable v-model="queryParams.createdAt" type="date" value-format="YYYY-MM-DD"
          placeholder="请选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="shenheList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="店铺名称" align="center" prop="storeName" />
      <el-table-column label="会员名称" align="center" prop="memberName" />
      <el-table-column label="店铺地址" align="center">
        <template #default="scope">
          <span>{{ scope.row.storeLocation + scope.row.storeAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否自营" align="center" prop="isSelfOperated">
        <template #default="scope">
          <el-tag v-if="scope.row.isSelfOperated === 0" type="danger">自营</el-tag>
          <el-tag v-else-if="scope.row.isSelfOperated === 1" type="success">非自营</el-tag>
          <span v-else>{{ scope.row.isSelfOperated }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleView(scope.row)"
            v-hasPermi="['dianpu:shenhe:edit']">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改店铺审核对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="shenheRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="会员名称" prop="memberName">
          <el-input v-model="form.memberName" placeholder="请输入会员名称" />
        </el-form-item>
        <el-form-item label="店铺名称" prop="storeName">
          <el-input v-model="form.storeName" placeholder="请输入店铺名称" />
        </el-form-item>
        <el-form-item label="是否自营：0自营，1非自营" prop="isSelfOperated">
          <el-input v-model="form.isSelfOperated" placeholder="请输入是否自营：0自营，1非自营" />
        </el-form-item>
        <el-form-item label="店铺所在地" prop="storeLocation">
          <el-input v-model="form.storeLocation" placeholder="请输入店铺所在地" />
        </el-form-item>
        <el-form-item label="店铺详细地址" prop="storeAddress">
          <el-input v-model="form.storeAddress" placeholder="请输入店铺详细地址" />
        </el-form-item>
        <el-form-item label="店铺logo图片路径" prop="storeLogo">
          <el-input v-model="form.storeLogo" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="店铺简介" prop="storeDescription">
          <el-input v-model="form.storeDescription" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="收货人姓名" prop="receiverName">
          <el-input v-model="form.receiverName" placeholder="请输入收货人姓名" />
        </el-form-item>
        <el-form-item label="收件人手机" prop="receiverPhone">
          <el-input v-model="form.receiverPhone" placeholder="请输入收件人手机" />
        </el-form-item>
        <el-form-item label="详细地址" prop="receiverAddressDetail">
          <el-input v-model="form.receiverAddressDetail" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="库存预警数" prop="stockWarningNum">
          <el-input v-model="form.stockWarningNum" placeholder="请输入库存预警数" />
        </el-form-item>
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="form.companyName" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="公司电话" prop="companyPhone">
          <el-input v-model="form.companyPhone" placeholder="请输入公司电话" />
        </el-form-item>
        <el-form-item label="公司所在地" prop="companyLocation">
          <el-input v-model="form.companyLocation" placeholder="请输入公司所在地" />
        </el-form-item>
        <el-form-item label="公司实际地址" prop="companyAddress">
          <el-input v-model="form.companyAddress" placeholder="请输入公司实际地址" />
        </el-form-item>
        <el-form-item label="员工总数" prop="employeeCount">
          <el-input v-model="form.employeeCount" placeholder="请输入员工总数" />
        </el-form-item>
        <el-form-item label="注册资金(万)" prop="registeredCapital">
          <el-input v-model="form.registeredCapital" placeholder="请输入注册资金(万)" />
        </el-form-item>
        <el-form-item label="联系人姓名" prop="contactName">
          <el-input v-model="form.contactName" placeholder="请输入联系人姓名" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入电子邮箱" />
        </el-form-item>
        <el-form-item label="营业执照号" prop="businessLicenseNo">
          <el-input v-model="form.businessLicenseNo" placeholder="请输入营业执照号" />
        </el-form-item>
        <el-form-item label="法定经营范围" prop="businessScope">
          <el-input v-model="form.businessScope" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="营业执照电子版图片路径" prop="businessLicenseImage">
          <image-upload v-model="form.businessLicenseImage" />
        </el-form-item>
        <el-form-item label="法人姓名" prop="legalPersonName">
          <el-input v-model="form.legalPersonName" placeholder="请输入法人姓名" />
        </el-form-item>
        <el-form-item label="法人证件号" prop="legalPersonId">
          <el-input v-model="form.legalPersonId" placeholder="请输入法人证件号" />
        </el-form-item>
        <el-form-item label="法人身份证照片" prop="legalPersonIdPhoto">
          <el-input v-model="form.legalPersonIdPhoto" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="结算银行开户名" prop="bankAccountName">
          <el-input v-model="form.bankAccountName" placeholder="请输入结算银行开户名" />
        </el-form-item>
        <el-form-item label="结算银行账号" prop="bankAccountNumber">
          <el-input v-model="form.bankAccountNumber" placeholder="请输入结算银行账号" />
        </el-form-item>
        <el-form-item label="银行支行名称" prop="bankBranchName">
          <el-input v-model="form.bankBranchName" placeholder="请输入银行支行名称" />
        </el-form-item>
        <el-form-item label="支行联行号" prop="bankBranchCode">
          <el-input v-model="form.bankBranchCode" placeholder="请输入支行联行号" />
        </el-form-item>
        <el-form-item label="结算日期(1-31)" prop="settlementDate">
          <el-input v-model="form.settlementDate" placeholder="请输入结算日期(1-31)" />
        </el-form-item>
        <el-form-item label="创建时间，自动设置为当前时间" prop="createdAt">
          <el-date-picker clearable v-model="form.createdAt" type="date" value-format="YYYY-MM-DD"
            placeholder="请选择创建时间，自动设置为当前时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="最后更新时间，每次更新自动设置为当前时间" prop="updatedAt">
          <el-date-picker clearable v-model="form.updatedAt" type="date" value-format="YYYY-MM-DD"
            placeholder="请选择最后更新时间，每次更新自动设置为当前时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收货地址" prop="receiverAddress">
          <el-input v-model="form.receiverAddress" placeholder="请输入收货地址" />
        </el-form-item>
        <el-form-item label="经营范围" prop="scope">
          <el-input v-model="form.scope" placeholder="请输入经营范围" />
        </el-form-item>
        <el-form-item label="店铺定位" prop="location">
          <el-input v-model="form.location" placeholder="请输入店铺定位" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Shenhe">
import { listShenhe, getShenhe, delShenhe, addShenhe, updateShenhe } from "@/api/dianpu/shenhe"

const { proxy } = getCurrentInstance()

const shenheList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    memberName: null,
    storeName: null,
    isSelfOperated: null,
    storeLocation: null,
    storeAddress: null,
    storeLogo: null,
    storeDescription: null,
    receiverName: null,
    receiverPhone: null,
    receiverAddressDetail: null,
    stockWarningNum: null,
    companyName: null,
    companyPhone: null,
    companyLocation: null,
    companyAddress: null,
    employeeCount: null,
    registeredCapital: null,
    contactName: null,
    email: null,
    businessLicenseNo: null,
    businessScope: null,
    businessLicenseImage: null,
    legalPersonName: null,
    legalPersonId: null,
    legalPersonIdPhoto: null,
    bankAccountName: null,
    bankAccountNumber: null,
    bankBranchName: null,
    bankBranchCode: null,
    settlementDate: null,
    createdAt: null,
    updatedAt: null,
    receiverAddress: null,
    scope: null,
    storeStatus: 2,  // 默认显示待审核状态
    location: null
  },
  rules: {
    memberName: [
      { required: true, message: "会员名称不能为空", trigger: "blur" }
    ],
    storeName: [
      { required: true, message: "店铺名称不能为空", trigger: "blur" }
    ],
    isSelfOperated: [
      { required: true, message: "是否自营：0自营，1非自营不能为空", trigger: "blur" }
    ],
  }
})

const { queryParams, form, rules } = toRefs(data)

/** 查询店铺审核列表 */
function getList() {
  loading.value = true
  listShenhe(queryParams.value).then(response => {
    shenheList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    memberName: null,
    storeName: null,
    isSelfOperated: null,
    storeLocation: null,
    storeAddress: null,
    storeLogo: null,
    storeDescription: null,
    receiverName: null,
    receiverPhone: null,
    receiverAddressDetail: null,
    stockWarningNum: null,
    companyName: null,
    companyPhone: null,
    companyLocation: null,
    companyAddress: null,
    employeeCount: null,
    registeredCapital: null,
    contactName: null,
    email: null,
    businessLicenseNo: null,
    businessScope: null,
    businessLicenseImage: null,
    legalPersonName: null,
    legalPersonId: null,
    legalPersonIdPhoto: null,
    bankAccountName: null,
    bankAccountNumber: null,
    bankBranchName: null,
    bankBranchCode: null,
    settlementDate: null,
    createdAt: null,
    updatedAt: null,
    receiverAddress: null,
    scope: null,
    storeStatus: null,
    location: null
  }
  proxy.resetForm("shenheRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加店铺审核"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _id = row.id || ids.value
  getShenhe(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改店铺审核"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["shenheRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateShenhe(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addShenhe(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除店铺审核编号为"' + _ids + '"的数据项？').then(function () {
    return delShenhe(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => { })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('dianpu/shenhe/export', {
    ...queryParams.value
  }, `shenhe_${new Date().getTime()}.xlsx`)
}

/** 通过审核操作 */
function handleApprove(row) {
  const shopInfo = {
    id: row.id,
    storeStatus: 0  // 设置为开启状态
  }
  proxy.$modal.confirm('确认通过该店铺的审核申请？').then(function () {
    return updateShenhe(shopInfo)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("审核通过成功")
  }).catch(() => { })
}

/** 拒绝审核操作 */
function handleReject(row) {
  const shopInfo = {
    id: row.id,
    storeStatus: 1  // 设置为禁用状态
  }
  proxy.$modal.confirm('确认拒绝该店铺的审核申请？').then(function () {
    return updateShenhe(shopInfo)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("审核拒绝成功")
  }).catch(() => { })
}

/** 批量通过操作 */
function handleBatchApprove() {
  if (ids.value.length === 0) {
    proxy.$modal.msgError("请选择要审核的数据")
    return
  }
  proxy.$modal.confirm(`是否确认批量通过选中的 ${ids.value.length} 条数据？`).then(function () {
    // 批量更新状态为开启
    const promises = ids.value.map(id => {
      return updateShenhe({ id: id, storeStatus: 0 })
    })
    return Promise.all(promises)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("批量通过成功")
  }).catch(() => { })
}

/** 批量拒绝操作 */
function handleBatchReject() {
  if (ids.value.length === 0) {
    proxy.$modal.msgError("请选择要审核的数据")
    return
  }
  proxy.$modal.confirm(`是否确认批量拒绝选中的 ${ids.value.length} 条数据？`).then(function () {
    // 批量更新状态为禁用
    const promises = ids.value.map(id => {
      return updateShenhe({ id: id, storeStatus: 1 })
    })
    return Promise.all(promises)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("批量拒绝成功")
  }).catch(() => { })
}

/** 查看按钮操作 */
function handleView(row) {
  const _id = row.id || ids.value
  // 跳转到详情页面，传递店铺ID
  proxy.$router.push({
    path: '/dianpu/shenhe/detail',
    query: { id: _id }
  })
}

getList()
</script>
